import React from "react";
import View from "../base/View";
import defaultData from "./data";
import { WeaTextarea, WeaLocaleProvider } from "ecCom";
import './index.less';
import { CHECKED } from '../../../../../constants/common';
import { _subTitle } from "../../../../common/check-length";

const formatMultiLang = WeaLocaleProvider.formatMultiLang;

export default class TextareaView extends View {
  renderContent(data, value) {
    const { placeholder, key = this.renderKey } = data;
    
    return (
      <div className='wea-view-textarea'>
        <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@arlopn`}
          value={value}
          minRows={3}
          key={key}
          maxRows={6}
          placeholder={formatMultiLang(placeholder)}
          onBlur={this.handleValueChange}
      	/>
  		{ data.max && data.max.checked === CHECKED ? 
		  <span className='wea-textarea-tips'>{value.length}/{data.max.value}</span> : '' 
		}
      </div>
    );
  }

  getSubTitle(data){
    let minV = 0;
    let maxV = 0;
    if (data.min && data.min.value){
      minV = data.min.value;
    }
    if (data.max && data.max.value){
      maxV = data.max.value;
    }
    return _subTitle(maxV,minV);
  }
}

TextareaView.defaultProps = {
  data: defaultData,
  value: ''
};